<template>
  <div class="order_progress">
    <el-popover popper-class="order_progress_popper" placement="right" :width="362" show-after="500" hide-after="0"
      trigger="hover">
      <template #reference>
        <div class="order_progress"
          :style="data.run_status == 1 && data.order_list.length == 0 ? 'background-color: #fbda94;' : ''">
          <div class="order_progress_success" :style="`width: ${num}%`">
            <template v-if="data.place_stake > 0 && num >= 30">
              {{ data.place_stake }} {{ statusText }}
            </template>
          </div>
          <div class="order_progress_error" v-if="num <= 70">
            <template v-if="num < 70"> {{ data.total_stake - data.place_stake }} NO </template>
          </div>
        </div>
      </template>
      <div class="order_propress_content">
        <div class="content">
          <div>{{ languageJson.home.total }}：{{ data.total_stake }}</div>
          <div>{{ languageJson.home.ordered }}：{{ data.place_stake }}</div>
          <div>{{ languageJson.home.noorderplaced }}：{{ data.total_stake - data.place_stake }}</div>
        </div>
        <el-table :data="data.order_list">
          <el-table-column width="75" property="date" :label="languageJson.home.bctype">
            <template #default="scope">
              <div class="AlibabaPuHuiTi_2_55_">{{ languageJson.bctypes[scope.row.bc_type] }}</div>
            </template>
          </el-table-column>
          <el-table-column width="38" property="name" :label="languageJson.home.odd">
            <template #default="scope">
              <div class="AlibabaPuHuiTi_2_55_">{{ scope.row.place_odds_info }}</div>
            </template>
          </el-table-column>
          <el-table-column property="address" :label="languageJson.home.orderAmount">
            <template #default="scope">
              <div class="AlibabaPuHuiTi_2_55_">{{ scope.row.total_amount }}</div>
            </template>
          </el-table-column>
          <el-table-column width="58" property="address" :label="languageJson.home.status">
            <template #default="scope">
              <div
                v-if="homeState.order.activetype == 2 && (scope.row.check_status_code == 'confirmed' || scope.row.check_status_code == 'cancelled')"
                class="AlibabaPuHuiTi_2_55_" style="color: #ff5f58;">
                {{ languageJson.home.abnormal }}</div>
              <div v-else class="AlibabaPuHuiTi_2_55_"
                :style="scope.row.place_status == 3 ? 'color: #ff5f58;' : 'color: #1cc535;'">
                {{ orderstatus2[scope.row.place_status] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="date" :label="languageJson.home.accountNumber">
            <template #default="scope">
              <div class="AlibabaPuHuiTi_2_55_">{{ scope.row.user_name }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </el-popover>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const { homeStore, homeState } = inject('HomeStore')
const orderstatus2 = ref({
  0: languageJson.value.home.orderSuccess,
  1: languageJson.value.home.orderSuccess,
  2: languageJson.value.home.orderSuccess,
  3: languageJson.value.home.orderFail,
})
const props = defineProps({
  data: Object,
})
const num = computed(() => {
  let a = (props.data.place_stake / props.data.total_stake) * 100
  if (a >= 95) {
    a = 100
  }
  return a
})

const statusText = computed(() => {
  let a = (props.data.place_stake / props.data.total_stake) * 100
  let str = ''
  if (props.data.run_status == 0) {
    str = 'YES'
  }
  if (props.data.run_status == 1) {
    str = 'YES'
  }
  if (props.data.run_status == 2) {
    str = 'YES'
  }
  if (props.data.run_status == 3) {
    str = 'YES'
  }
  return str
})
const orderstatus = ref({
  0: languageJson.value.home.alreadyReservation,
  1: languageJson.value.home.alreadyPlaceorder,
  2: languageJson.value.home.orderSuccess,
  3: languageJson.value.home.orderFail,
})
const getnum = () => {
  if (num.value != 100) {
    num.value += 10
    setTimeout(() => {
      getnum()
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.order_progress {
  width: 100%;
  border-radius: 4px;
  height: 100%;
  background-color: #dcdef0;
  display: flex;
}

.order_progress_success {
  height: 100%;
  border-radius: 4px;
  background-color: #96e8a9;
  display: flex;
  align-items: center;
  justify-content: center;
  // font-family: DINAlternate;
  font-size: 12px;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order_progress_error {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  // font-family: DINAlternate;
  font-size: 12px;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.order_propress_content {
  display: flex;
  flex-direction: column;

  .content {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: bold;
    color: #666;

    div {
      display: flex;
      align-items: center;
    }
  }
}
</style>

<style>
.order_progress .el-progress-bar__outer {
  border-radius: 4px !important;
  background-color: #dcdef0;
}

.order_progress .el-progress-bar__inner {
  border-radius: 4px !important;
  text-align: center;
}

.order_progress .el-progress-bar__inner .el-progress-bar__innerText {
  font-size: 12px;
  font-weight: bold;
  color: #000;
}

.order_progress_popper {
  padding: 8px !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2) !important;
}

.order_progress_popper .el-table th .cell {
  line-height: 16px;
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 12px;
  font-weight: bold;
  color: #666;
  padding: 0 4px;
}

.order_progress_popper .el-table th.el-table__cell {
  height: 24px;
  padding: 4px 0;
  border: none;
}

.order_progress_popper .el-table td.el-table__cell {
  height: 24px;
  padding: 4px 0;
  border: none;
}

.order_progress_popper .el-table td .cell {
  font-size: 12px;
  color: #000;
  line-height: 16px;
  padding: 0 4px;
}

.order_progress_popper .el-table__inner-wrapper::before {
  height: 0;
}
</style>